<template>
  <van-tabbar v-model="active" router active-color="#ff3d00" inactive-color="#000">
    <van-tabbar-item to="/">
      <span>首页</span>
      <template #icon="props">
          <i class="iconfont" :class="props.active ? 'active icon-caipin-' : 'inactive icon-caipin-1'"></i>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/order">
      <span>订单</span>
      <template #icon="props">
        <i class="iconfont" :class="props.active ? 'active icon-youhui-' : 'inactive icon-dingdan-1'"></i>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/my">
      <span>我的</span>
      <template #icon="props">
        <i class="iconfont" :class="props.active ? 'active icon-wode-1' : 'inactive icon-wode-'"></i>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import {Tabbar, TabbarItem} from 'vant';

export default {
  name: 'GTabbar',
  data() {
    return {
      active: parseInt(this.active1),
      icon: {
        active: 'https://img.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
      }
    }
  },
  props: ['active1'],
  components: {
    'van-tabbar': Tabbar,
    'van-tabbar-item': TabbarItem
  },
  mounted() {
    // console.log(this.active1);
  }
}
</script>

<style lang="scss" scoped>
@import "../../common/styles/globalStyle.scss";
.iconfont{
  font-size: vw(50);
}
</style>
